// 首页
<template>
  <div class="bo">
    <div class="box">
      <img src="@/assets/home-2.png" />
      <div class="box-1">
        <h1 class="text-style">多种识别功能</h1>
        <p class="text-p-style">
          您可以在此网站上上传图片进行单个图片识别 也可以选择上传文件夹的形式
          同时识别多张图片
          为了满足多种需求我们还为您提供拍照上传以及实时识别功能
          目的旨在让用户满意 方便快捷 打造成熟的产品
        </p>
      </div>
    </div>
    <br /><br /><br /><br /><br />
    <div class="box">
      <img src="@/assets/home-1.png" style="padding-left: 100px" />
      <div class="box-1" style="float: left">
        <h1 class="text-style">作物病害诊断</h1>
        <p class="text-p-style">
          快速识别 通过多个可视化展示识别病虫害的占比以及识别的正确率占比
          并为您匹配您所上传图片的最精准的病虫害种类 提供对应的病害信息治疗以及预防措施
          给出相应的解决方案 识别准确度达到95%以上
        </p>
      </div>
    </div>
    <br /><br /><br /><br /><br />
    <div class="box">
      <img src="@/assets/home-3.png" />
      <div class="box-1">
        <h1 class="text-style">功能大全</h1>
        <p class="text-p-style">
          根据不同需求我们加入了上千种病害百科以及病害搜索
          及时了解最新新闻 提供了精准的用药量及兑水量计算 反馈页面及时了解用户需求
        </p>
      </div>
    </div>

    <!-- <div class="footer">
      <img src="@/assets/footer-img.jpg" style="width:1200px;height:230px;"/>
    </div> -->
    <br/><br/><br/>
    <div class="footer">
            <div class="top">
              <img src="@/assets/11111(1)(1).png" style="width: 360px;margin-top: 0px;margin-left: 10px;height: 170px;"/>
            </div>
            <div class="right">
              <h3 class="h3" style="color: aliceblue;margin-left: 30px;font-size: 30px;margin-top: 20px;">快速导航</h3>
              <ul class="ul">
                <li @click="ff1">首页&nbsp;</li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                <li @click="ff2"><a>识别&nbsp;</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;
                <li @click="ff3"><a>百科&nbsp;</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/><br/>
                <li @click="ff4"><a>搜索&nbsp;</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
                <li @click="ff5"><a>新闻&nbsp;</a></li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;
                <li @click="ff6"><a>反馈&nbsp;</a></li><br/><br/>
                <li @click="ff7"><a>用药&nbsp;</a></li>
              </ul>
            </div>
            <div class="right2">
                <h3 class="h3" style="color: aliceblue;margin-left: 30px;font-size: 30px;margin-top: 20px;">关于我们</h3>
                <h4 style="margin-top: -12px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;队名&nbsp;:&nbsp;&nbsp;你说对不对队</h4>
                <h3 class="h3" style="color: aliceblue;margin-left: 30px;font-size: 30px;margin-top: -12px;">联系我们</h3><br/>
                <h4 style="margin-top:-40px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;编号&nbsp;:&nbsp;&nbsp;34014439</h4>
            </div>
        </div>
  </div>
</template>

<script>
export default {
  created(){
    
    this.loadComments()
  },
  methods: { 
    loadComments() {  
      var number=localStorage.getItem("number");    
      localStorage.setItem("number",number);
    },
    ff1() {
      this.$router.push("/home");
      this.$store.commit("setMenuBar", false);
    },
    ff2() {
      this.$router.push("/shibie");
      this.$store.commit("setMenuBar", true);
    },
    ff3() {
      this.$router.push("/baike"); //左侧菜单栏
      this.$router.push("/baike/rightDetail"); //右侧病害列表
      //是否在识别页（顶部菜单栏的识别），true代表是
      this.$store.commit("setMenuBar", false);
    },
    ff4() {
      this.$router.push("/search/search2");
       this.$store.commit("setMenuBar", false);
    },
    ff5(){
      this.$router.push('/Medication/index2')
    },
    ff6(){
      this.$router.push('/Medication/index3')
    },
    ff7(){
      this.$router.push('/Medication/index1')
    },

  },
};
</script>
<style scoped>
.bo {
  /* height: 700px; */
}
.box {
  width: 1100px;
  /* height:380px; */
  margin: auto;
  margin-top: -40px;
}
.box-1 {
  /* display: inline-block; */
  width: 600px;
  float: right;
  /* height: 340px; */
}
img {
  width: 380px;
  /* height: 330px; */
}
.text-style {
  text-align: center;
  font-size: 45px;
}
.text-p-style {
  font-size: 23px;
  color: rgb(77, 87, 96);
}
.footer{
        width:1100px;
        height:230px;
        margin: auto;
        background-color: rgb(207, 213, 206);
        /* background-color: rgb(25, 116, 35); */
        margin-top: 0px;
    }
    .top{
      width:360px;
      height:200px;
      /* background-color: aquamarine; */
      /* background-color: blue;    */
      float: left;
    }
    li{
      list-style: none;
      display: inline-block;
      color: rgb(12, 91, 49);
      font-size: 20px;
    }
.img{
  width:300px;
  height:60px;
}
.right{
        width: 380px;
        height: 230px;
        float: left;
        margin-left: 40px;
        /* background-color: rgb(186, 215, 215); */
    }
    .right2{
        width: 320px;
        height: 230px;
        float: left;
        /* background-color: bisque; */
    }
</style>
